<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心-新居期望</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .line{
            width: 1502px;
            margin-left: 71px;
            height: 7px;
            background-color: #F58220;
        }
        .title{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .title-item{
            background-color: #FFB87C;
            color: #FFFFFF;
            font-size: 20px;
            padding: 9px 34px;
            border-radius: 20px;
            margin: -27px 50px 0 50px;
        }
        .title-selected{
            background-color: #F58220;
        }
        .habit-list{
            width: 1502px;
            margin-left: 71px;
            display: flex;
            flex-direction: column;
            margin-top: 38px;
            padding: 21px 0;
        }
        .habit-item{
            display: flex;
            flex-direction: row;
            margin: 21px 0;
            align-items: center;
        }
        .habit-title{
            width: 296px;
            font-size: 22px;
            color: #F58220;
        }
        .habit-item-list{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .item-one{
            min-width: 168px;
            font-size: 22px;
            color: #B7B7B7;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .radio{
            width: 20px;
            height: 20px;
            border-radius: 12px;
            border: #999999 1px solid;
            margin-right: 8px;
        }
        .redio-selected{
            border: #F58220 1px solid;
            background-color: #F58220; 
        }
        .habit-foot{
            margin-top: 44px;
            width: 1502px;
            margin-left: 71px;
            color: #B7B7B7;
            text-align: center;
        }
        .foot-button{
            width: 1502px;
            margin-left: 71px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
            position: absolute;
            bottom: 68px;
        }
        .button-1{
            background-color: #B7B7B7;
            padding: 6px 30px;
            border-radius: 20px;
            font-size: 20px;
            margin: 0 10px;
        }
        .button-2{
            background-color: #F58220;
            padding: 6px 30px;
            border-radius: 20px;
            font-size: 20px;
            margin: 0 10px;
            
        }
        .new-style-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 22px;
            color: #F58220;
            margin-right: 94px;
        }
        .expext-input{
            width: 358px;
            height: 35px;
            background-color: #EDEDED;
            border-radius: 17.5px;
            padding: 0 10px 0 20px;
            border: #EDEDED 0 solid;
            outline: 0;
        }
    </style>
</head>
<body>
    <div class="heard">
        <img src="img/woniu_logo@2x.png" style="width: 307px;height: 68px;margin-left: 8px;margin-top: 63px;">
        <div class="right-top">
            <div class="heard-item">
                <img src="img/woniu_self@2x.png" style="width: 37px;height: 37px;margin-bottom: 14px;">
                <div>个人主页</div>
            </div>
            <div class="heard-item" onclick="showNavigation()">
                <img src="img/woniu_caidan@2x.png" style="width: 31px;height: 37px;margin-bottom: 14px;">
                <div>功能导航</div>
            </div>
        </div>
    </div>
    <div class="content">
        <div style="height: 61px;"></div>
        <div class="line"></div>
        <div class="title">
            <div class="title-item">完善基本信息</div>
            <div class="title-item">家庭习惯调研</div>
            <div class="title-item title-selected">新居期望调研</div>
        </div>
        <div class="habit-list">
            <div class="habit-item">
                <div class="habit-title">房子使用倾向：</div>
                <div class="habit-item-list">
                    <div class="item-one">
                        <div class="radio redio-selected"></div>
                        <div>第一居所</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>第二居所</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>度假</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>养老</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>投资</div>
                    </div>
                </div>
            </div>
            <div class="habit-item">
                <div class="habit-title">新居风格：</div>
                <div class="habit-item-list">
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;margin-bottom: 24px;">
                        <div>北欧</div>
                    </div>
                </div>
            </div>
            <div class="habit-item">
                <div class="habit-title">喜好：</div>
                <div class="habit-item-list">
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                    <div class="new-style-item">
                        <img src="img/bgd.png" style="width: 74px;height: 74px;border-radius: 37px;">
                    </div>
                </div>
            </div>
            <div class="habit-item">
                <div class="habit-title">全屋整装：</div>
                <div class="habit-item-list">
                    <div class="item-one">
                        <div class="radio redio-selected"></div>
                        <div>中央音乐</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>全屋家电</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>全屋安防 </div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>温控</div>
                    </div>
                    <div class="item-one">
                        <div class="radio"></div>
                        <div>全屋照明</div>
                    </div>
                    <div class="item-one">
                        <div class="radio redio-selected"></div>
                        <div>其他</div>
                    </div>
                </div>
            </div>
            <div class="habit-item">
                <div class="habit-title">其他期望：</div>
                <div class="habit-item-list">
                <input type="text" class="expext-input">
                </div>
            </div>
        </div>
        <div class="habit-foot">- 问题选项全部加载完成 -</div>
        <div class="foot-button">
            <span class="button-1">上一步</span>
            <span class="button-2">下一步</span>
        </div>
    </div>
    <div class="navigation" id="navigation" onmouseleave="moveOutNavigation()">
        <div class="navigation-top"></div>
        <div class="navigation-content">
            <div class="navigation-item">
                <img src="img/baogao@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>调研报告</div>
            </div>
            <div class="navigation-heng"></div>
            <div class="navigation-item">
                <img src="img/tuichu@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>退出登录</div>
            </div>
        </div>
    </div>
    <div class="foot">Copyright © 2021 All rights reserved.蜗牛渼家 用户需求调研与分析系统</div>
</body>
<script>
    let navigationShow = true
    function showNavigation() {
        if (navigationShow == true) {
            document.getElementById("navigation").style.display = "block";
            navigationShow = false
        } else {
            document.getElementById("navigation").style.display = "none";
            navigationShow = true
        }
    }
    function moveOutNavigation() {
        document.getElementById("navigation").style.display = "none";
        navigationShow = true
    }
</script>
</html>